<template>
	<transition name="sidebarBox">
		<div class="sidebar" v-show="sidebarShow" @click="closure">
			<div class="sidebar-con">
				<div class="sidebar-logo">
					<img v-if="$i18n.locale == 'en'" class="logo-text" src="@/static/2-1.png" />
					<img v-else class="logo-text" src="@/static/2-cn.png" mode="" />
					<img class="logo" src="@/static/2-2.png" />
				</div>
				<div @click.stop="openUrl(item.url)" class="sidebar-list" v-for="(item, index) in sidebarList" :key="index">

					<img v-if="item.logo" class="item-logo" :src="item.logo" mode="" />
					<div class="item-name" :class="{ 'item-name1': index == 0 || index == 1 ||  index == 2 }">{{ item.name }}</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
export default {
	name: "sidebar",
	props: {
		sidebarShow: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		sidebarList() {
			return [
			{
				logo:'',
				name:this.$t('invite'),
				url:'invite'
			},
			{
				logo:'',
				name:this.$t('NFT staking'),
				url:''
			},
			{
				logo:'',
				name:this.$t('Token redemption'),
				url:''
			},
			{
				logo:require('@/static/10.png'),
				name:'Etherscan(NFT)',
				url:'https://etherscan.io/token/0x1095d6395c34c1635af43124e9d16c0604c31e32'
			},
			{
				logo:require('@/static/11.png'),
				name:'Twitter',
				url:'https://twitter.com/Random_Dao'
			},
			{
				logo:require('@/static/14.png'),
				name:'OpenSea',
				url:'https://opensea.io/collection/sagittariusboy'
			},
			{
				logo:require('@/static/15.png'),
				name:'X2Y2',
				url:'https://twitter.com/Random_Dao'
			},
			{
				logo:require('@/static/element.jpg'),
				name:'Element',
				url:'https://twitter.com/Random_Dao'
			},
			{
				logo:require('@/static/13.png'),
				name:'Discord',
				url:'https://twitter.com/Random_Dao'
			},
			{
				logo:require('@/static/12.png'),
				name:'YouTube',
				url:'https://twitter.com/Random_Dao'
			},
			]
		}
	},
	data() {
		return {

		}
	},
	methods: {
		closure() {
			this.$emit("closure", false)
		},
		openUrl(url) {
			if (!url) return
			if (url == 'invite') {
				this.$emit("invite", true)
			} else {
				window.location.href = url
			}
		}
	}
}
</script>

<style lang="scss">
/* 给过渡的name加样式 */
.sidebarBox-leave-active,
.sidebarBox-enter-active {
	transition: all 1s ease;
}

.sidebarBox-leave-active,
.sidebarBox-enter {
	transform: translateY(-100%) !important;
}

.sidebarBox-leave,
.sidebarBox-enter-active {
	transform: translateY(0);
}

.sidebar {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.1);
}

.sidebar-con {
	height: 95%;
	width: 195px;
	background-color: #5BC7D4;
	text-align: center;
	padding-bottom: 20px;
	overflow-y: scroll;

	.sidebar-logo {
		border-bottom: 1px dashed #9BE3EC;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 72px;
		padding-top: 10px;

		.logo-text {
			width: 135px;
			height: 36px;
		}

		.logo {
			width: 52px;
			height: 31px;
			position: absolute;
			top: 3px;
			right: 5px;
		}
	}

	.sidebar-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px dashed #9BE3EC;
		height: 62px;

		.item-logo {
			width: 30px;
			height: 30px;
			padding-left: 10px;
		}

		.item-name {
			color: #fff;
			width: 54%;
			text-align: center;
			font-size: 13px;
			font-weight: bold;
		}

		.item-name1 {
			width: 100%;
		}
	}
}
</style>